<template>
    <div class="dialog_historyAlarm">
        <el-dialog v-model="dialogVisible" title="" :before-close="handleClose" align-center
            :close-on-click-modal="false" :close-on-press-escape="false">
            <div class="dialog_content">
                <div class="dialog_title">
                    <span>历史报警记录</span>
                </div>
                <div class="dialog_body">
                    <div class="searchBar">
                        <div class="searchBar_item">
                            <div class="searchBar_label">类型：</div>
                            <div class="searchBar_content">
                                <span class="item_content" :class="{ 'item_active': searchIndex_type == 0 }"
                                    @click="changeIndex_type(0)">全部</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_type == 1 }"
                                    @click="changeIndex_type(1)">消防报警</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_type == 2 }"
                                    @click="changeIndex_type(2)">安防报警</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_type == 3 }"
                                    @click="changeIndex_type(3)">设备报警</span>
                            </div>
                        </div>
                        <div class="searchBar_item">
                            <div class="searchBar_label">级别：</div>
                            <div class="searchBar_content">
                                <span class="item_content" :class="{ 'item_active': searchIndex_level == 0 }"
                                    @click="changeIndex_level(0)">全部</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_level == 1 }"
                                    @click="changeIndex_level(1)">提醒</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_level == 2 }"
                                    @click="changeIndex_level(2)">一般</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_level == 3 }"
                                    @click="changeIndex_level(3)">紧急</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_level == 4 }"
                                    @click="changeIndex_level(4)">危急</span>
                            </div>
                        </div>
                        <div class="searchBar_item">
                            <div class="searchBar_label">状态：</div>
                            <div class="searchBar_content">
                                <span class="item_content" :class="{ 'item_active': searchIndex_status == 0 }"
                                    @click="changeIndex_status(0)">全部</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_status == 1 }"
                                    @click="changeIndex_status(1)">未处理</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_status == 2 }"
                                    @click="changeIndex_status(2)">处理中</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_status == 3 }"
                                    @click="changeIndex_status(3)">已处理</span>
                                <span class="item_content" :class="{ 'item_active': searchIndex_status == 4 }"
                                    @click="changeIndex_status(4)">已关闭</span>
                            </div>
                        </div>
                        <div class="searchBar_bot">
                            <div class="bot_item">
                                <div class="bot_label">一级系统</div>
                                <el-select v-model="searchData.params.system" placeholder="请选择系统"
                                    popper-class="my_popper" clearable>
                                    <el-option v-for="item in systemOptions.list" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                            <div class="bot_item">
                                <div class="bot_label">二级系统</div>
                                <el-select v-model="searchData.params.system2" placeholder="请选择系统"
                                    popper-class="my_popper" clearable>
                                    <el-option v-for="item in systemOptions.list2" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                            <div class="bot_item">
                                <div class="bot_label">时间</div>
                                <el-date-picker v-model="value_dete" type="daterange" range-separator="~"
                                    start-placeholder="开始日期" end-placeholder="结束日期" clearable />
                            </div>
                            <div class="bot_btn">
                                <span>重置</span>
                            </div>
                            <div class="bot_btn btn2">
                                <span>搜索</span>
                            </div>
                        </div>
                    </div>
                    <el-table class="table_alarm" :data="tableList.list" fit style="width :100%;" stripe>
                        <el-table-column prop="num" label="报警编号" />
                        <el-table-column prop="type" label="报警类型" />
                        <el-table-column prop="systemName" label="一级系统" />
                        <el-table-column prop="systemName2" label="二级系统" />
                        <el-table-column prop="level" label="级别" />
                        <el-table-column prop="equipmentName" label="设备" />
                        <el-table-column prop="location" label="位置" />
                        <el-table-column prop="content" label="报警内容" />
                        <el-table-column prop="status" label="状态" />
                        <el-table-column prop="time" label="时间" />
                        <el-table-column label="操作" class-name="lastColumn" :width="getVw(130)">
                            <template #default="scope: any">
                                <span class="btn">查看</span>
                                <span class="btn btn2">定位</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <CommonPagination2 :pageNum="searchData.pageNum" :pageSize="searchData.pageSize" :pageTotal="total"
                        @pageFunc="pageFunc" @sizeChange="sizeChange"></CommonPagination2>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
})
const dialogVisible = ref(false)

watch(() => props.visible, (newVal) => {
    dialogVisible.value = newVal;
})

const getVw = (vw: number) => {
    // console.log('125',vw * window.innerWidth / 1920);
    return vw * window.innerWidth / 1920;
}

let searchIndex_type = ref(0);//选中的类型下标
let searchIndex_level = ref(0);//选中的级别下标
let searchIndex_status = ref(0);//选中的状态下标

//改变类型筛选
const changeIndex_type = (index: number) => {
    if (searchIndex_type.value != index) {
        searchIndex_type.value = index;
    }
}

//改变级别筛选
const changeIndex_level = (index: number) => {
    if (searchIndex_level.value != index) {
        searchIndex_level.value = index;
    }
}

//改变状态筛选
const changeIndex_status = (index: number) => {
    if (searchIndex_status.value != index) {
        searchIndex_status.value = index;
    }
}

let tableList = reactive({
    list: [
        {
            num: '00000012',
            type: '设备报警',
            systemName: '锅炉系统',
            systemName2: '炉汽水系统',
            level: '提醒',
            equipmentName: '烟感传感器503',
            location: 'Q1-K32号集水坑',
            content: '上壁壁温温度过高',
            status: '已关闭',
            time: '2024-03-25 19:31'
        },
        {
            num: '00000012',
            type: '设备报警',
            systemName: '锅炉系统',
            systemName2: '炉汽水系统',
            level: '提醒',
            equipmentName: '烟感传感器503',
            location: 'Q1-K32号集水坑',
            content: '上壁壁温温度过高',
            status: '已关闭',
            time: '2024-03-25 19:31'
        },
        {
            num: '00000012',
            type: '设备报警',
            systemName: '锅炉系统',
            systemName2: '炉汽水系统',
            level: '提醒',
            equipmentName: '烟感传感器503',
            location: 'Q1-K32号集水坑',
            content: '上壁壁温温度过高',
            status: '已关闭',
            time: '2024-03-25 19:31'
        },
        {
            num: '00000012',
            type: '设备报警',
            systemName: '锅炉系统',
            systemName2: '炉汽水系统',
            level: '提醒',
            equipmentName: '烟感传感器503',
            location: 'Q1-K32号集水坑',
            content: '上壁壁温温度过高',
            status: '已关闭',
            time: '2024-03-25 19:31'
        },
        {
            num: '00000012',
            type: '设备报警',
            systemName: '锅炉系统',
            systemName2: '炉汽水系统',
            level: '提醒',
            equipmentName: '烟感传感器503',
            location: 'Q1-K32号集水坑',
            content: '上壁壁温温度过高',
            status: '已关闭',
            time: '2024-03-25 19:31'
        },
        {
            num: '00000012',
            type: '设备报警',
            systemName: '锅炉系统',
            systemName2: '炉汽水系统',
            level: '提醒',
            equipmentName: '烟感传感器503',
            location: 'Q1-K32号集水坑',
            content: '上壁壁温温度过高',
            status: '已关闭',
            time: '2024-03-25 19:31'
        },
        {
            num: '00000012',
            type: '设备报警',
            systemName: '锅炉系统',
            systemName2: '炉汽水系统',
            level: '提醒',
            equipmentName: '烟感传感器503',
            location: 'Q1-K32号集水坑',
            content: '上壁壁温温度过高',
            status: '已关闭',
            time: '2024-03-25 19:31'
        },
        {
            num: '00000012',
            type: '设备报警',
            systemName: '锅炉系统',
            systemName2: '炉汽水系统',
            level: '提醒',
            equipmentName: '烟感传感器503',
            location: 'Q1-K32号集水坑',
            content: '上壁壁温温度过高',
            status: '已关闭',
            time: '2024-03-25 19:31'
        },
        {
            num: '00000012',
            type: '设备报警',
            systemName: '锅炉系统',
            systemName2: '炉汽水系统',
            level: '提醒',
            equipmentName: '烟感传感器503',
            location: 'Q1-K32号集水坑',
            content: '上壁壁温温度过高',
            status: '已关闭',
            time: '2024-03-25 19:31'
        },
        {
            num: '00000012',
            type: '设备报警',
            systemName: '锅炉系统',
            systemName2: '炉汽水系统',
            level: '提醒',
            equipmentName: '烟感传感器503',
            location: 'Q1-K32号集水坑',
            content: '上壁壁温温度过高',
            status: '已关闭',
            time: '2024-03-25 19:31'
        },
    ]
})


let value_dete = ref("");//时间

let searchData = reactive({
    pageNum: 1,
    pageSize: 10,
    params: {
        system: "",
        system2: ''
    }
})

let systemOptions = reactive({
    list: [
        {
            value: '1',
            label: '锅炉系统',
        },
        {
            value: '2',
            label: '汽机系统',
        },
    ],
    list2: [
        {
            value: '1',
            label: '锅炉系统01',
        },
        {
            value: '2',
            label: '锅炉系统02',
        },
    ]
})

let total = ref(90);

const emit = defineEmits(['closeDialog'])
const handleClose = () => {
    emit('closeDialog');
}

const pageFunc = () => {

}

const sizeChange = () => {

}
</script>

<style lang="scss" scoped>
.dialog_historyAlarm {
    :deep(.el-dialog) {
        width: vw(1320);
        height: vh(700);
        background: rgba(0, 52, 71, 0.7);
        padding: 0;
        color: #fff;
        border: 1px solid #00E3FE;
        border-radius: vh(8);

        .el-dialog__header {
            padding: 0;

            .el-dialog__headerbtn {
                height: vh(44);
                width: vh(44);
            }

            .el-dialog__close {
                color: #00E3FE;
            }
        }

        .dialog_content {
            .dialog_title {
                color: #fff;
                width: 100%;
                height: vh(44);
                font-size: vh(16);
                color: #FFFFFF;
                line-height: vh(44);
                border-bottom: 1px solid #00E3FE;
                padding-left: vh(18);
            }

            .dialog_body {
                padding: vh(18) vh(10) 0 vh(14);

                .searchBar {
                    .searchBar_item {
                        display: flex;
                        margin-bottom: vh(14);

                        .searchBar_label {
                            width: vh(50);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            font-size: vh(14);
                            color: #FFFFFF;
                            line-height: 1;
                        }

                        .searchBar_content {
                            flex: 1;
                            display: flex;

                            .item_content {
                                width: vh(80);
                                text-align: center;
                                height: vh(22);
                                // background: #00E3FE;
                                background: rgba(0, 227, 254, 0.2);
                                border-radius: vh(4);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                font-size: vh(12);
                                color: #FFFFFF;
                                line-height: vh(22);
                                margin-right: vh(20);
                                cursor: pointer;
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                &.item_active {
                                    background: rgba(0, 227, 254, 0.2);
                                    border: 1px solid #00E3FE;
                                    color: #00E3FE;
                                }
                            }
                        }
                    }

                    .searchBar_bot {
                        display: flex;
                        margin-bottom: vh(20);

                        .bot_item {
                            display: flex;
                            margin-right: vh(30);

                            .bot_label {
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                font-size: vh(12);
                                color: #00E3FE;
                                margin-right: vh(8);
                            }

                            .el-select {
                                width: vh(119);
                                height: vh(18);

                                .el-select__wrapper {
                                    width: 100%;
                                    height: 100%;
                                    min-height: 0;
                                    line-height: vh(18);
                                    font-size: vh(10);
                                    background: rgba(0, 192, 255, 0.2);
                                    border-radius: vh(3);
                                    box-shadow: none;
                                    //    border: 1px solid #00CCE4;
                                    border: 1px solid rgba(0, 192, 255, 0.5);

                                    .el-select__icon {
                                        font-size: vh(12);
                                        color: #00E3FE;
                                    }

                                    .el-select__selected-item {
                                        color: #D3E0E2;
                                    }
                                }
                            }

                            .el-date-editor {
                                width: vh(193);
                                height: vh(18);
                                background: rgba(0, 192, 255, 0.2);
                                border-radius: vh(3);
                                border: 1px solid #00CCE4;
                                box-shadow: none;
                                padding: 0 vh(8);

                                .el-input__icon {
                                    font-size: vh(12);
                                }

                                .el-range-input {
                                    height: vh(18);
                                    line-height: vh(18);
                                    font-size: vh(11);
                                    color: #D3E0E2;
                                }

                                .el-range-separator {
                                    padding: 0 vh(5);
                                    font-size: vh(12);
                                    color: #D3E0E2;
                                }
                            }
                        }

                        .bot_btn {
                            width: vh(68);
                            height: vh(25);
                            border-radius: vh(4);
                            line-height: vh(25);
                            border: 1px solid #00AABE;
                            text-align: center;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            font-size: vh(12);
                            color: #FFFFFF;
                            margin-right: vh(20);
                            cursor: pointer;

                            &.btn2 {
                                background: #00AABE;
                                border: none;
                            }
                        }
                    }
                }

                .navBar {
                    display: flex;
                    margin-top: vh(18);
                    margin-bottom: vh(16);

                    .nav_item {
                        padding: 0 vh(9);
                        height: vh(20);
                        line-height: vh(20);
                        background: rgba(0, 174, 211, 0.3);
                        border-radius: vh(4);
                        margin-right: vh(20);
                        font-size: vh(12);
                        color: #FFFFFF;
                        min-width: vh(48);
                        text-align: center;
                        cursor: pointer;

                        &.nav_active {
                            background: #00AED3;
                        }
                    }
                }

                .table_alarm {
                    margin-bottom: vh(21);
                    border: 1px solid #5A7275;

                    .lastColumn {
                        // width: vw(130);
                        border-left: 1px solid #5A7275;
                        .btn {
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            font-size: vh(12);
                            color: #00E4FF;
                            margin-right: vw(22);
                            cursor: pointer;

                            &.btn2 {
                                margin-right: 0;
                            }
                        }
                    }

                    tr {
                        .el-table__cell {

                            .cell {
                                line-height: vh(36);
                                height: vh(36);
                                border-bottom: 1px solid #5A7275;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
<style lang="scss">
.my_popper {
    .el-select-dropdown__item {
        font-size: vw(14);
        height: vw(34);
        line-height: vw(34);
        padding-left: vw(10);
    }
}
</style>
